<!DOCTYPE html>
<html>
  <head>
    <title>表单生成器</title>
   、 <style>
      body{margin-top:20px;}
      .box{font-family:Tahoma,simsun;font-size:12px;border:1px solid #1678BE;display:table;margin:0 auto;}
      .box-head{padding:5px 20px;background-color:#2487C9;color:#fff;font-size:14px;}
      .box-body{padding:10px 20px;}
      .box-body th{font-weight:normal;vertical-align:top;padding-top:5px;}
      .box-body td{padding-top:2px;padding-bottom:8px;}
      .box-body select{font-family:Tahoma,simsun;font-size:12px;padding:2px 5px;cursor:pointer;}
      .box-body label{margin-right:5px;cursor:pointer;}
      .box-body label input{cursor:pointer;}
      .box-body input{vertical-align:middle;font-family:Tahoma,simsun;font-size:12px;}
      .box-body input[type=text]{padding:2px;}
      .box-body input[type=radio]{margin-top:-1px;}
      .box-body input[type=submit]{padding:4px 15px;cursor:pointer;}
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box-head">个人信息</div>
      <div class="box-body">
        <form id="form" action="form.php" method="post"></form>
      </div>
    </div>
    <script>
        (function(window) {
  var FormBuilder = function(data) {
    this.data = data;
  };
  FormBuilder.prototype.create = function() {
    var html = '';
    for (var k in this.data) {
      var item = {tag: '', text: '', attr: {}, option: null};
      for (var n in this.data[k]) {
        item[n] = this.data[k][n];
      }
      html += builder.toHTML(item);
    }
    return '<table>' + html + '</table>';
  };
  var builder = {
    toHTML: function(obj) {
      var html = this.item[obj.tag](this.attr(obj.attr), obj.option);
      return '<tr><th>' + obj.text + '</th><td>' + html + '</td></tr>';
    },
    attr: function(attr) {
      var html = '';
      for(var k in attr) {
        html += k + '="' + attr[k] + '" ';
      }
      return html;
    },
    item: {
      input: function(attr, option) {
        var html = '';
        if (option === null) {
           html += '<input ' + attr + '>';
        } else {
          for (var k in option) {
            html += '<label><input ' + attr + 'value="'  + k + '"' + '>' + option[k] + '</label>';
          }
        }
        return html;
      },
      select: function(attr, option) {
        var html = '';
        for (var k in option) {
          html += '<option value="' + k + '">' + option[k] + '</option>';
        }
        return '<select ' + attr +'>' + html + '</select>';
      },
      textarea: function(attr) {
        return '<textarea ' + attr + '></textarea>';
      }
    }
  };
  window.FormBuilder = FormBuilder;
})(window);
      var elements = [
        {tag: 'input', text: '姓　　名：', attr: {type: 'text', name: 'user'}},
        {tag: 'input', text: '性　　别：', attr: {type: 'radio', name: 'gender'}, option: {m: '男', w: '女'}},
        {tag: 'input', text: '爱　　好：', attr: {type: 'checkbox', name: 'hobby[]'}, option: {swimming: '游泳', reading: '读书', running: '跑步'}},
        {tag: 'select', text:'住　　址：', attr: {name: 'area'}, option: {'': '--请选择--', bj: '北京', sh: '上海', sz: '深圳'}},
        {tag: 'textarea', text: '自我介绍：', attr: {name: 'introduce', cols:'50', rows: '5'}},
        {tag: 'input', attr: {type: 'submit', value: '提交'}}
      ];
      document.getElementById('form').innerHTML = new FormBuilder(elements).create();
    </script>
  </body>
</html>